<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

  <link href="./css-gridish/css/bx-grid.min.css" rel="stylesheet">

  <style>
    body {
      font-family: Helvetica, Arial, sans-serif;
      grid-auto-flow: row dense;
    }

    .selection {
      grid-column-start: span 12;
      grid-row-start: span 36;
    }

    .bx-grid--fluid-rows .selection {
      grid-row-start: span 12;
    }

    @media (min-width: 35rem) {
      .selection {
        grid-column-start: span 6;
      }

      .bx-grid--fluid-rows .selection {
        grid-row-start: span 7;
      }
    }

    .selection * {
      margin-top: 0;
    }

    p {
      max-width: 16rem;
    }
  </style>
</head>

<body class="bx-container bx-grid">
  <div class="bx-padding selection">
    <h1>CSS Gridish</h1>
    <h2>Carbon Example</h2>
    <input type="radio" id="fixedRows" onclick="handleToggle(this);" name="contact" value="false">
    <label for="fixedRows">Fixed rows (default)</label>
    <br>
    <input checked type="radio" id="fluidRows" onclick="handleToggle(this);" name="contact" value="true">
    <label for="fluidRows">Fluid rows (.bx-grid--fluid-rows)</label>
    <br>
    <br>
    <p>Learn more about
      <a href="https://github.com/ibm/css-gridish">CSS Gridish.</a>
    </p>
    <p>Also check out our examples of CSS Gridish making grid code for
      <a href="../bootstrap/index.html">Bootstrap</a> and
      <a href="../material/index.html">Material.</a>
    </p>
  </div>
</body>
<script>
  function makeNewElement() {
    var colors = ["#3d70b2", "#5596e6", "#41d6c3", "#8c9ba5", "#dfe3e6"];
    var div = document.createElement("div");
    var columnSize = Math.ceil(Math.random() * 6);
    var rowSize = Math.ceil(Math.random() * 6);
    var color = colors[Math.ceil(Math.random() * (colors.length - 1))];
    div.setAttribute("style", "background: " + color + "; grid-column-start: span " + columnSize + "; grid-row-start: span " + rowSize + ";");
    return div;
  }

  for (var i = 0; i < 50; i++) {
    document.body.appendChild(makeNewElement());
  }

  function handleToggle(radio) {
    if (radio.value === "true") {
      document.body.classList.add("bx-grid--fluid-rows")
    } else {
      document.body.classList.remove("bx-grid--fluid-rows")
    }
  }

  handleToggle({ value: "true" });
</script>

</html>